<template>
	<view class="body" >
		
		<view class="bg" >
			
			<view class="head-img" >
				<image :src=" infoDetail.head_portrait ? infoDetail.head_portrait : require('static/missing-face.png')" ></image>
			</view>
			
			<view class="title" >
				<text style="margin-right: 4px;" >{{item.nick_name}}</text> 邀请您加入商城
			</view>
			
			<view class="code" >
				<image :src="codeImg" ></image>
			</view>
			
			
			<button class="copy-btn" @click="saveAction" >保存二维码</button>
			
			<view class="rules" >
				<view class="text" >活动规则:</view>
				<view class="text" >
					1. 商城保留法律范围内的最终解释权，如有其它疑问请咨询官方客服。
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
export default{
	
	data(){
		return{
			infoDetail: {},
			codeImg: ''
		}
	},
	onLoad() {
		
		this.getInfo()
		this.getCode()
	},
	methods:{
		getInfo(){
			this.$https.Mine.getUseInfo().then(req => {
				console.log('req',req)
				this.infoDetail = req
			})
		},
		getCode(){
			this.$https.Mine.invitedUsers().then(req => {
				console.log('哈哈哈哈哈哈哈',req)
				this.codeImg = req
			})
		},
		saveAction(){  //保存图片
			
			if(this.codeImg){
				this.savePhoto()
			}else{
				uni.showToast({
					title: '图片加载失败',
					icon: 'none'
				})
			}
		},
		savePhoto(){
			
			uni.showLoading()
			
			uni.downloadFile({
				url: this.codeImg,
				success: (res) =>{
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success(req) {
							uni.hideLoading()
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							})
						},
						fail(error) {
							uni.hideLoading()
							uni.showToast({
								title: '保存失败,请稍后重试',
								icon: 'none'
							})
						}
						
					})
				}
			})
		}
	}
}

</script>

<style lang="scss" >
	
	.body,page{
		width: 100%;
		height: 100%;
		
		background-color: #ED5A5C;
	}
	
	.bg{
		
		position: relative;
		margin: 40rpx;
		
		display: flex;
		align-items: center;
		flex-direction: column;
		
		height: 90%;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		
		text-align: center;
		
		.head-img{
			
			margin-top: -40rpx;
			
			width: 100rpx;
			height: 100rpx;
			
			image{
				width: 100%;
				height: 100%;
				border-radius: 100rpx;
			}
		}
		
		.title{
			margin: 50rpx 0;
		}
		
		.code{
			margin: 100rpx 0;
			
			width: 180rpx;
			height: 180rpx;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.copy-btn{
			
			margin: 30rpx 50rpx 20rpx 50rpx;
			
			width: 84%;
			
			box-shadow: 0 0 4rpx rgba(0,0,0,0.6);
			// box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
			
			font-size: $uni-font-size-base;
			color: #FFFFFF;
			background-color: $uni-color-error;
		}
		
		.rules{
			
			padding: 20rpx 50rpx 10rpx 50rpx;
			
			width: 100%;
			text-align: left;
			
			.text{
				color: #333;
				font-size: $uni-font-size-base;
			}
		}
	}
	
	button::after{
		border: none;
	}
</style>
